<template>
  <div id="app">
    <div id="market">



      <div class="head">
        <div class="wrapper clearfix">
          <div class="clearfix" id="top">
            <h1 class="fl"><a><img src="../img/YNU.png"/></a></h1>
            <div class="fr clearfix" id="top1">
              <p class="fl">
                <a href="login" id="login">登录</a>
                <a href="register" id="reg">注册</a>
              </p>
            </div>
          </div>
          <ul class="clearfix" id="bott">
            <li>
              <a href="shop">所有店铺</a>
            </li>
            <li>
              <a href="item?shopId=2">足球球衣</a>
            </li>
            <li>
              <a href="item?shopId=3">主机游戏</a>
            </li>
            <li><a href="orderList">我的订单</a></li>
          </ul>
        </div>
      </div>
      <!-----------------banner------------------------------->
      <div class="banner">
        <a href="#"><img src="../img/AFFF1.png"/></a>
      </div>
      <!-----------------address------------------------------->
      <div class="address">
        <div class="wrapper clearfix">
          <a href="shop">商店列表</a>
          <span>/</span>
          <a href="item" class="on">商品列表</a>
        </div>
      </div>
      <!-----------------paintCon------------------------------->
      <div class="paintCon">
        <section class="wrapper">
          <div class="paintList" v-for="(item,index) in dataList" :key="index">
            <dl>
              <dt><img v-bind:src="item.url" width="310px" height="310px"></dt>
              <dd>{{item.name}}</dd>
              <dd>{{item.description}}</dd>
              <dd><span>{{item.price}}</span></dd>
              <a @click="createOrder(item)"><img src="../img/gwc.png"/></a>
            </dl>
            <!--					</a>-->
          </div>
        </section>

      </div>
      <!--返回顶部-->
      <div class="gotop">
        <a href="orderList">
          <dl>
            <dt><img src="../img/gt1.png"/></dt>
            <dd>去购<br />物车</dd>
          </dl>
        </a>
        <a @click="logOut">
          <dl>
            <dt><img src="../img/logout.png"/></dt>
            <dd>退出<br />登录</dd>
          </dl>
        </a>
      </div>
      <div class="msk"></div>
      <!--footer-->
      <div class="footer">
        <div class="top">
          <div class="wrapper">
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot1.png"/></a>
              <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot2.png"/></a>
              <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot3.png"/></a>
              <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
              <a href="#2" class="fl"><img src="../img/foot4.png"/></a>
              <span class="fl">手机特色服务</span>
            </div>
          </div>
        </div>
        <p class="dibu">云南大学&copy;软件设计体系期末作业 软件学院软件工程专业<br />
          违法和不良信息举报电话：10086-250-110</p>
      </div>

    </div>

  </div>
</template>

<script>
function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

export default {
  name: "ViewItem",
  data() {
    return {
      dataList: [],
      userId:0
    }
  },
  created() {
    var pareName="shopId";
    var queryId=GetQueryString(pareName);
    this.findAll(queryId);
    this.getUser();
  },
  methods: {
    //查询
    findAll(queryId) {
      if (queryId!=null)
      {
        this.$http({
          url: 'http://localhost:84/item/getAll/'+queryId,}).then((res)=>{
          this.dataList = res.data.data;
        },(err)=>{
          if (err.response.status==403)
          {
            this.$message("未通过认证，请先登录或被授予权限");
          }
          else {
            console.log('err',err);
          }
        });
      }
      else {
        this.$http({
          url: 'http://localhost:84/item/getAll/2',
        }).then((res)=>{
          this.dataList = res.data.data;
        },(err)=>{
          console.log('err',err);
        });
      }
    },

    getUser() {
      this.$http({
        url: 'http://localhost:84/user/get',
      }).then((res)=>{
        this.userId = res.data;
        console.log(this.userId);
      },(err)=>{
        console.log('err',err);
      });
    },

    createOrder(item){
      this.$http({
        method: "POST",
        data: item,
        url: 'http://localhost:84/order/create/'+this.userId}).then((res)=>{
          if(res.data.flag){
            this.$message.success(res.data.message)
          }
          else {
            this.$message.error(res.data.message)
          }
          // var orderId=res.data.data.id;
          // window.location.href="order?orderId="+orderId;
      },(err)=>{
        console.log('err',err);
      });
    },

    logOut(){
      this.$confirm("确认退出登录？", "提示", {type: 'warning'}).then(() => {
        this.$http.get("http://localhost:84/user/logout").then((res) => {
          if (!res.data.flag) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success(res.data.message)
          }
          sessionStorage.removeItem('token');
          this.$router.push({name:'UserLogin'});
        })
      });
    },
  }
}
</script>

<style scoped>
@import "../css/proList.css";
@import "../css/public.css";
</style>